// jscards v0.4
// ------------------------------------------
// Use the <deck> element to display cards.
// Example:
//        <deck>Kc</deck>
//        <deck>10h</deck>
// ------------------------------------------
// author: Dimitri Tholen <dtholen@gmail.com>
var red = "red";
var black = "#222";

suits = {
    d: "&diams;",
    c: "&clubs;",
    h: "&hearts;",
    s: "&spades;",
    x: "x"
}

color = {
    d: red,
    h: red,
    c: black,
    s: black,
    x: black
}

style = {
    display: "inline-block",
    padding: "0px 2px",
    background: "#eff",
    border: "1px solid #888",
    "font-family": "Monaco, 'Andale Mono', 'Pro Font', 'sans-serif'",
    "font-size": "0.8em",
    margin: "0 3px 0px 0",
    "border-radius": "3px",
    "moz-border-radius": "3px"
}

$("deck").each(function() {

    var card = this.innerHTML;
    var re = /\d{1,2}|[kaqjt][csdhx]/i;

    if (card.match(re)) {
        var value = card.substr(0, (card.length - 1));
        var suit = card.substr(-1);

        if (value.match(/[akqjt]/)) {
            value = value.toUpperCase();
        }

        if (suit == "X") {
            suit = suit.toLowerCase();
        }

        processCard(this, value, suit);
    }

    function processCard(obj, value, suit) {
        $(obj).after("<div></div>");
        var newCard = $(obj).next();
        $(obj).remove();
        newCard.append("<span>" + value + "</span>").
        append("<span>" + suits[suit] + "</span>").
        css(style).css("color", color[suit]);
    }
});
